<!--
 * @Description: Description
 * @Author: Kerwin
 * @Date: 2024-04-18 18:44:53
 * @LastEditTime: 2024-07-25 14:43:49
 * @LastEditors:  Please set LastEditors
-->
<!-- eslint-disable no-unused-expressions -->
<!-- eslint-disable radix -->
<!-- eslint-disable no-useless-escape -->
<!-- eslint-disable no-param-reassign -->

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { baseApi, powerBankApi, userApi } from '@/api'
import { dateFormat, getImgFullPath } from '@/utils/index'
import { useUserStore } from '@/store'
import {
  browserVersion,
  compareVersion,
  qs,
  getQueryVariable
} from '@/utils/common'

const userStore = useUserStore()
const { userInfo, hasLogin } = storeToRefs(userStore)
const deviceInfo = ref({})
const siteInfo = ref({})
const deviceSn = ref('')
const serviceType = ref(powerBankApi.serviceType.WASH)
const loading = ref(false)
const checked = ref(false)
const show = ref(false)
const configDetails = ref([])
const selectedConfig = ref({})
const orderId = ref('')
function showSelect() {
  show.value = true
}
function confirm(e: { value: any }[]) {
  const { value } = e[0]
  selectedConfig.value =
    configDetails.value.find((item) => item.type === value) || {}
}

async function getDetail() {
  uni.showLoading({
    mask: true
  })
  const { data } = await powerBankApi
    .getDeviceDetail({
      deviceSn: deviceSn.value
    })
    .finally(() => {
      uni.hideLoading()
    })
  deviceInfo.value = data?.device
  siteInfo.value = data?.site
}

const outOrderNo = ref('')
const paymentSubType = ref(4) // h5=4，app=11
// 停止设备
async function stop(params?: { paymentType: any }) {
  uni.showLoading()
  loading.value = true
  const obj = {
    serviceType: serviceType.value,
    orderId: orderId.value
  }
  const { code, message } = await powerBankApi.deviceStop(obj).finally(() => {
    loading.value = false
    uni.hideLoading()
  })
  if (code === 0) {
    uni.showModal({
      title: '提示',
      content: message || '操作成功',
      showCancel: false,
      confirmText: '确认',
      success: (res) => {
        let time = 8
        let timer = setInterval(() => {
          time--
          if (time) {
            uni.showToast({
              title: `操作成功,${time}s后返回上一页`,
              icon: 'none',
              mask: true,
              duration: time * 1000
            })
          } else {
            clearInterval(timer)
            timer = null
            uni.navigateBack()
          }
        }, 1000)
      }
    })
  }
}
const userBalance = ref()
async function getOrderConsumeType() {
  const { data } = await powerBankApi.getOrderConsumeType({
    deviceSn: deviceSn.value
  })
  configDetails.value = data?.orderConsumeTypeConfig?.configDetails
  selectedConfig.value = configDetails.value[0] || {}
  userBalance.value = data?.userBalance
  // console.log(configDetails.value, 888)
}

function jump() {
  uni.navigateTo({
    url: '/packageB/pages/carWash/mine'
  })
}

// 获取进行中的订单
const order = ref()
async function getCustomerWashingOrder(orderId: any) {
  const { data } = await powerBankApi.getCustomerWashingOrder({
    serviceType: serviceType.value,
    id: orderId
  })
  order.value = data
}
onLoad(async (option) => {
  if (option?.orderId) {
    orderId.value = option?.orderId
    getCustomerWashingOrder(option?.orderId)
  }
})
</script>
<template>
  <view class="container">
    <view class="topBox">
      <view class="tit">{{ order?.deviceDetail?.site?.name }}</view>
      <view class="wrap">
        <view class="item">
          <view class="label">洗车设备ID</view>
          <view class="val"> {{ order?.deviceDetail?.device?.sn }}</view>
        </view>
        <view class="item">
          <view class="label">开始洗车时间</view>
          <view class="val"> {{ dateFormat(new Date(order?.washOrder?.createTime), 'yyyy-MM-dd hh:mm:ss') }}</view>
        </view>
      </view>
    </view>
    <view class="img_box">
      <image src="https://image.blacksilverscore.com/uploads/c5d44dae-c419-4dfe-9b7e-0632734f8dab.png"
        mode="widthFix" class="img" />
    </view>
    <view class="btn_wrap">
      <u-button ripple :hair-line="false" class="btn" :custom-style="{ background: '#50939c', color: '#fff' }"
        @click="stop" :loading="loading">点击结束洗车</u-button>
    </view>

  </view>
</template>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #fff;

  .topBox {
    background: #50939c;
    padding: 40rpx;

    .tit {
      font-size: 36rpx;
      color: #fff;
    }

    .desc {
      color: #fff;
      margin-top: 10rpx;
    }

    .wrap {
      background: rgba(255, 255, 255, 0.4);
      border-radius: 20rpx;
      color: #fff;
      padding: 10rpx 20rpx;
      line-height: 44rpx;
      margin-top: 20rpx;
      font-size: 26rpx;

      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 20rpx 0;
      }
    }
  }

  .section {
    padding: 30rpx;
    line-height: 50rpx;
  }

  .img_box {
    display: flex;
    justify-content: center;
    align-items: center;

    .img {
      width: 400rpx;
      margin-top: 100rpx;
      animation: bounce 1.3s infinite;
    }
  }
}
@keyframes bounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
 


.btn_wrap {
  margin: 30rpx 30rpx 0 30rpx;
  padding-bottom: 80rpx;

  .btn {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom) + 80rpx);
    left: 0;
    width: calc(100% - 60rpx);
    margin: 0 30rpx;
    height: 100rpx;
    border-radius: 20rpx;
  }

  :deep(.u-btn--default--disabled) {
    opacity: 0.5;
  }

  .order_tips {
    margin-bottom: 30rpx;
  }
}

.check {
  text-align: center;
  margin-top: 30rpx;
  font-size: 24rpx;
}

.mask_tips {
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
  margin-top: 60rpx;
}

.tips {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30rpx;
}
</style>
